<template>
   <div class="city_body">
		<div class="city_list ">
			<div class="city_hot">
				<h2>热门城市</h2>
				<ul class="clearfix">
					 <li v-for="item in hotList" :key="item.id">{{item.nm}}</li>				 
				</ul>
			</div>
			<div class="city_sort" ref="city_sort">
				 <div v-for="item in cityList" :key="item.index">
					<h2>{{item.index}}</h2>
					<ul>
						<li v-for="list in item.list" :key="list.id">{{list.nm}}</li>
					</ul>
				</div> 
			</div>
		</div>
		<div class="city_index">
		    <ul>
		    	<li v-for="(item,index) in cityList" :key="item.index" @touchstart="handleToIndex(index)">{{item.index}}</li>
		    </ul>
		</div>
	</div>
</template>

<script>
import {cityList} from  '../../api/index'

export default {
    props: {

    },
    data() {
        return {
			cityList:[],
			hotList:[]
        };
    },
    computed: {

    },
    created() {

    },
    async mounted() {
	   let result = await cityList()
	   console.log(result);
	   if (result.msg=='ok') {
		   let cities = result.data.cities;
		   let  {cityList,hotList} =  this.fromatcity(cities)
		    this.cityList = cityList
		    this.hotList = hotList
	   }
    },
    watch: {

    },
    methods: {
		fromatcity(cities){

			let cityList = [];
			let hotList = []

			cities.forEach(item => {
				let firstLetter = item.py.substring(0,1).toUpperCase();
				
				if(item.isHot===1) {
					hotList.push(item)
				}
				// console.log(firstLetter);
				toCom(firstLetter)
				
				if (toCom(firstLetter)) {
					cityList.push({index:firstLetter,list:[{nm:item.nm,id:item.id}]})
				}else {
					cityList.forEach(val=>{
						if (val.index==firstLetter) {
							val.list.push({nm:item.nm,id:item.id})
						}
					})
				}
				
			})
			cityList.sort((n1,n2)=>{
				if (n1.index>n2.index) {
					return 1
				}else if(n1.index<n2.index){
					return -1
				}else {
					return 0
				}
			})

			function toCom(firstLetter) {
				// console.log(firstLetter);
				
				for (var i=0;i<cityList.length;i++) {
					if (cityList[i].index===firstLetter) {
						return false
					}
				}
				return true
			}
			console.log(cityList);
			// console.log(hotList);
			
			return {
				cityList,
				hotList
			}
		},
		handleToIndex(index){
			// 给最右边每一个首字母绑定点击事件 传入对应的索引值
			// 最左边的板块与最右边的首字母一一对应 找到每个板块的标题h2 根据传进来的索引找到点击首字母时相对应的板块标题
			// 然后找到 当前板块标题距离顶端的距离 最后把当前板块标题距离顶端的距离，赋值给当前整个板块需要滑动的距离
			console.log(index);
			// 所有的最左边板块的标题
			let h2 = this.$refs.city_sort.getElementsByTagName('h2')
			// 每一个板块标题距离最顶端的距离
			console.log(h2[index].offsetTop);
			// 当前板块scrollTop滚动的距离 === 当前板块距离最上面的距离 那么当前板块就会滚动到最上面
			this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop
			
		}
			

		
    },
    components: {

    },
};
</script>

<style scoped >
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: fixed; top: 52px; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: rgb(247, 245, 245);}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:rgb(238, 237, 237); border-bottom: 1px solid #ccc; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:rgb(238, 237, 237);  border-bottom: 1px solid #ccc; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}
</style>

